<template>
  <div>
    <div id="chart3"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import axios from "@/utils/request";
export default {
  data() {
    return {
      myChart: null,
    };
  },
  methods: {
    echartsFn(data) {
      const dataSource = data ? data[1] : [];
      // [190, 220, 140, 260, 190, 230, 180, 260, 210, 130, 100, 260,];
      const nameList = [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
      ];
      const isRedList = new Array(dataSource.length).fill(0);
      const max = Math.max(...dataSource, 1);
      const getSymbolData = (datas) => {
        datas.shift();
        let arr = [];
        for (var i = 0; i < datas.length; i++) {
          isRedList[i] = max;
          arr.push({
            value: datas[i],
            symbolPosition: "end",
          });
        }
        console.log(arr, "arr");
        return arr;
      };
      let option = {
        backgroundColor: "transparent",
        tooltip: {
          trigger: "axis",
          padding: 15,
          axisPointer: {
            // type: "shadow", //cross
            label: {
              show: true,
              backgroundColor: "transparent",
            },
          },
          backgroundColor: "#0B2C54", // 提示框浮层的背景颜色。
          borderRadius: 5,
          textStyle: {
            // 提示框浮层的文本样式。
            color: "#fff",
          },
          // extraCssText:
          //   "box-shadow: 0 2px 25px #5cc0fd inset;text-align: center",
          formatter:
          //  "{b}<br />{a}：{c}mm",
          function (params) {
            // params 是一个包含数据信息的对象
                // 如果不是第一层图表的数据，返回空字符串不显示 tooltip
              const s1 = `<span style="display:inline-block;margin-right:4px;width:10px;height:5px;vertical-align:middle;background-color:#409EFF;"></span>`

                return params[0].seriesName+`<br/>`+s1+params[0].data[0] + ': ' +  `<span style="color:#409EFF;">${params[0].data[1]}</span>`+'mm';
        }
        },
        grid: {
          // left: 40,
          top: "12%",
          right: 10,
          bottom: "10%",
        },
        dataset: {
          // 提供一份数据。
          source:
             data?data:[],
            // [
            //   ["type", "1月", "2月", "3月", "4月", "5月", "6月", "7月"],
            //   ["月降雨量", "1", "3", "2", "0", "0", "0", "0"],
            // ],
        },
        xAxis: {
          // nameTextStyle: {
          //   color: "rgba(255, 255, 255, .8)",
          //   fontSize: 12,
          //   lineHeight: -25, //标题行高
          //   padding: [0, 0, 0, -10],
          //   verticalAlign: "bottom",
          // },
          // name: "月份",
          // data: nameList || [],
          type: "category",
          axisLabel: {
            show: true,
            fontSize: 12,
            interval: 0,
            textStyle: {
              color: "rgba(255, 255, 255, .8)",
            },
            //rotate: 30,
          },
          axisTick: {
            show: true,
            alignWithLabel: true, // 刻度线和标签对齐
            length: 5, // 刻度线的长度
            lineStyle: {
              color: "rgba(255, .3)",
              width: 1,
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, .3)",
              type: "solid",
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(47, 248, 252, 0.1)",
            },
          },
        },
        yAxis: [
          {
            nameTextStyle: {
              color: "rgba(255, 255, 255, .8)",
              fontSize: 12,
              padding: [0, 0, 5, 15],
            },
            name: "单位（mm）",
            // splitNumber:3,
            // max: 300,
            type: "value",
            axisLabel: {
              show: true,
              showMaxLabel: true,
              fontSize: 12,
              textStyle: {
                color: "rgba(255, 255, 255, .8)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(47, 248, 252, 0.3)",
                type: "solid",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(160, 222, 255, 1)",
                type: "solid",
                opacity: 0.2,
              },
            },
          },
        ],
        series: [
          {
            name: "",
            seriesLayoutBy: "row",
            type: "bar",
            barWidth: 15,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(64, 158, 255, 0.1)",
            },
            label: {
              show: false,
              position: "top",
              distance: 2,
              color: "rgba(0, 166, 255, 1)",
              fontWeight: "bolder",
              fontSize: nameList.length > 20 ? 9 : 12,
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(64, 158, 255, 0.4)",
                  },
                  {
                    offset: 1,
                    color: "rgba(64, 158, 255, 0.1)",
                  },
                ]),
              },
            },
            // data: dataSource || [],
          },
          {
            seriesLayoutBy: "row",
            xAxisIndex: 0,
            yAxisIndex: 0,
            type: "pictorialBar",
            symbol: "react",
            symbolSize: [15, 3],
            symbolOffset: [0.1, -2],
            symbolPosition: "end",
            z: 12,
            itemStyle: {
              color: "rgba(64, 158, 255, 1)",
              //  shadowColor:'rgba(252, 194, 50, 1)',
              shadowBlur: 20,
            },
            // data: getSymbolData(dataSource),
          },
          //  {
          //   type: 'bar',
          //   barWidth: 15,
          //   barGap: '-108%',
          //   data: isRedList,
          //   tooltip: {
          //     backgroundColor: 'transparent',
          //     formatter: ' ',
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: 'rgba(200,225,246,0.1)',
          //     },
          //   },
          //   zlevel: 7,
          // }
        ],
      };

      this.myChart.setOption(option);
    },
    getList() {
      axios
        .post("/dataview/chart/smartMineHistoryChart", {
          dateType: '3', //统计日期类型, 1-本日, 2-本月, 3-本年, 4-最近24小时, 5-最近30天, 6-最近一年
          points: [
            {
              pointMap: { 15030300100002: "月降雨量" }, //测点信息，key=测点id，value=图例显示名称
              sysPrefix: "Rain", //系统前缀
            },
          ],
        })
        .then((res) => {
          if (res.data) {
            this.echartsFn(res.data);
          }
        });
    },
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("chart3"));
    // this.echartsFn();
    // 为窗口的resize事件绑定事件处理函数
    window.addEventListener("resize", () => {
      this.myChart.resize();
    });
  },
  created() {
    this.getList();
  },
  beforeDestroy() {
    // this.myChart.dispose()//销毁
    this.myChart.clear(); //销毁
  },
};
</script>
<style scoped lang="scss">
#chart3 {
  width: 100%;
  height: 300px;
}
</style>
